<template>
  <div class="header">
    <div class="nowCity">当前城市 - {{ cityStore.curCity.name }}</div>
    <div class="search">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          background="#f4f4f4"
        />
      </form>
    </div>
  </div>
  <div class="page-city">
    <van-index-bar :index-list="cityStore.indexList" :sticky="false">
      <template v-for="city in cityStore.citys" :key="city.anchor">
        <van-index-anchor
          :index="city.anchor"
          style="background-color: #f4f4f4"
        />
        <van-cell
          v-for="item in city.citys"
          :key="item.cityId"
          :title="item.name"
          @click="handleChange(item)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
export default { name: "city" };
</script>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useCityStore } from "../../stores/city";
import Pinyin from 'pinyin-match';

const cityStore = useCityStore();
const router = useRouter();

const value = ref("");
const onSearch = (val) => Toast(val);
const onCancel = () => Toast("取消");

const searchRes = ref([]);

function handleChange(item) {
  cityStore.changeCurCity(item);
  router.push("/films/now-playing");
  console.log(cityStore.curCity);
}

onMounted(() => {
  cityStore.fetchRawCitys();
});

function Toast(value) {
  console.log(cityStore.citys);
  //提取输入框中的输入内容的第一个字符的大写
  // const str = value.trim().charAt(0).toUpperCase();
  // const str1 = cityStore.citys.filter((item) => item.anchor === str);

  //思路 定义一个布尔 当条件满足时用来筛选渲染页面的数据 filter
  // const arr = cityStore.citys.map((item) => item.citys);
  //   for (var i = 0; i < arr.length; i++) {
  //     var arr1 = arr[i].filter((item) => {
  //       var reg = new RegExp(value, "gi");
  //       return reg.test(item.pinyin);
  //     });
  //     if (arr1.length > 0) {
  //       searchRes.value.push(arr1);
  //     }
  //   }
  //   console.log(searchRes.value);
  // }

  //2
  // const xarr = cityStore.citys.filter((item) => {
  //   const arr1 = cityStore.citys.map((item) => item.citys);
  //   for (var i = 0; i < arr1.length; i++) {
  //     var arr2 = arr1[i].filter((item) => {
  //       var reg = new RegExp(value, "gi");
  //       return reg.test(item.pinyin);
  //     });
  //     return arr2.length > 0;
  //   }
  // });
  // console.log(xarr);


  //
}
</script>

<style lang="scss" scoped>
.header {
  .nowCity {
    height: 44px;
    text-align: center;
    line-height: 44px;
  }
  .search {
    height: 49px;
  }
}
.page-city {
  height: 100%;
  overflow-y: auto;
}
</style>
